Page Controls

hr.icon

ページコントロールは、フラットリスト内のページを表すインジケータイメージの列を表示します。

ページコントロールは、階層化されたページや非線形配列のページの視覚化やナビゲーションには役立ちませんが、スクロールするインジケータの列は、リストをナビゲートして目的のページを見つけるのに役立ちます。

ページコントロールは、任意の数のページを扱うことができるため、カスタムリストを作成するような場合に特に有効です。

https://gyazo.com/d247dca1a5716af990fffb6dae7a8df8

ページコントロールは、インジケータの外観を調整して、リストに関する情報を提供することができます。

例えば、コントロールは現在のページのインジケータを強調表示して、リスト内でのページの相対的な位置を推測できるようにします。

インジケータの数がスペースに収まらない場合は、両側のインジケータを縮小して、より多くのページが利用可能であることを示すことができます。

https://gyazo.com/574367ac18e6593fbab04faf5f54ebd4

ページコントロールを操作するには、タップまたはスクラブを使用します（スクラブするには、コントロールをタッチして左右にドラッグします）。

iPadOSでは、ポインタを使って特定のインジケータを指定することもできますが、現在のページインジケータの先頭または末尾をタップすると、次のページまたは前のページが表示されます。

また、コントロールの前縁または後縁を越えてスクラブすると、最初のページや最後のページに素早く到達できます。

開発者ノート

API では、タップは個別のインタラクションであるのに対し、スクラブは連続的なインタラクションです。

特に長いリストの場合は、ページコントロールに加えてリストビューを提供することを検討してください。

ページのリストを表示するには、通常、スワイプして次のページまたは前のページを表示しますが、このジェスチャーは、リストが長くなると疲れることがあります。

ページコントロールをスクラブすることは、各ページをスワイプするよりも速くて簡単ですが、人々はそれがオプションであることに気づかないかもしれません。

リスト表示にすることで、目的のページを探すための別の方法を提供し、リストの順序を変更することもできます。

ページコントロールでは、タップしたときとスクラブしたときの視覚的なフィードバックが異なります。

タップして次のページや前のページを表示するときには、ページをスワイプしたときに見られるページスクロールのアニメーションが使われます。

スクラブすると、遷移のアニメーションを使わずに新しいページが瞬時に表示されます。

https://gyazo.com/b77cd09d0cf4780d6dfaaef6de1c610b

スクラブ中にページ遷移をアニメーション化しないでください。

人々は非常に速くスクラブすることができるので、トランジションごとにスクロールアニメーションを使用すると、アプリが遅延したり、視覚的なフラッシュが発生したりする可能性があります。

スクロールのアニメーション遷移は、タップ時にのみ使用してください。

ページコントロールには、インジケータの視覚的なコントラストを提供する半透明の四角い丸い背景を含めることができます。

背景のスタイルは、次のいずれかを選択できます。

Automatic

コントロールが操作されたときのみ背景を表示します。このスタイルは、ページコントロールがUIの主要なナビゲーション要素でない場合に使用します。

Prominent

常に背景を表示します。コントロールが画面内の主要なナビゲーショナルコントロールである場合にのみ、このスタイルを使用します。

Minimal

背景を表示しません。このスタイルは、リスト内の現在のページの位置を表示するだけで、スクラブ中に視覚的なフィードバックを提供する必要がない場合に使用します。

最小の背景スタイルを使用する場合は、スクラブをサポートしません。

最小限のスタイルでは、スクラブ時に視覚的なフィードバックが提供されません。

アプリ内のページのリストをスクラブする場合は、自動または著名な背景スタイルを使用してください。

ページコントロールを画面の下に配置する。

ページコントロールがどこにあるかを常に把握できるようにするには、水平方向に中央に配置し、画面の下部付近に配置します。

Customizing Indicator Images

デフォルトでは、ページコントロールはシステムが提供するドットグリフをすべてのインジケータに使用しますが、特定のページを識別できるように独自の画像を表示することもできます。

例えば、「Weather」では、location.fillシンボルを使用して、現在の場所のページを識別しています。

アプリを改良する場合は、カスタム画像を提供してすべてのインジケータのデフォルト画像として使用したり、特定のページに異なる画像を提供することもできます。

カスタムインジケータの画像は、シンプルでわかりやすいものにしてください。

複雑な形状は避け、ネガティブスペース、テキスト、内側の線などは入れないでください。

これらの詳細はグリフを濁らせ、非常に小さいサイズでは判読できなくなります。

デフォルトのインジケータ画像をカスタマイズするのは、ページコントロールの全体的な意味を高める場合のみにしてください。

例えば、すべてのページにしおりが含まれている場合は、デフォルトのインジケータ画像として bookmark.fill シンボルを使用することができます。

1つのページコントロールで2つ以上の異なるインジケータ画像を使用することは避けてください。

リストに特別な意味を持つページ（Weatherの現在地ページなど）が含まれている場合、そのページに固有のインジケータ画像を与えることで、そのページを見つけやすくすることができます。

これに対して、いくつかの重要なページを示すために複数のユニークなイメージを使用するページコントロールは、それぞれのイメージの意味を覚えなければならないため、使いにくいものです。

また、2種類以上のインジケータ画像を表示するページコントロールは、それぞれの画像が明確であっても、ゴチャゴチャした無秩序な印象を与えがちです。

https://gyazo.com/916c1c5b1f38cf0d3a781da0b11d1cba

https://gyazo.com/59f951555ee7f30a18609777866bbc9c

インジケータのイメージに色をつけないようにしてください。

カスタムカラーは、現在のページのインジケータを区別し、画面上でページコントロールを見えるようにするためのコントラストを低下させる可能性があります。

ページコントロールを使いやすくし、さまざまな状況で見栄えを良くするために、システムが自動的にインジケータを着色するようにしてください。